<template>
  <div class="container">
    <h3>视频列表</h3>
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    >
     <van-cell v-for="item in videoLists" :key="item.id" :title="item.name" @click="goVideoDetail(item.id)" />
    </van-list>
  </div>

  </template>

<script>
import { loadVideosCategoryMethod } from '@/api/loadVideos'
export default {
  name: 'VideosIndex',
  data () {
    return {
      videoLists: [],
      videoListsLength: [],
      loading: false,
      finished: false,
      playVideos: false,
      selectVideos: true,
      error: false,
      currentPage: 1,
      indexList: []

    }
  },
  created () {
    if (this.$store.state.allCategory === '1') {
      this.loadVideos()
      this.videoListsLength = this.videoLists.length
    }
  },
  mounted () {

  },
  updated () {

  },
  methods: {
    async loadVideos () {
      const videosRes = await loadVideosCategoryMethod()
      this.videoLists = videosRes.data.records
      this.finished = true
    },
    goVideoDetail (categoryId) {
      this.$router.push('/videoDetail/' + categoryId)
    }
  }
}
</script>

<style scoped>
 .container{
  width: 100%;
  height: 600px;
 }
 .page{
  position: absolute;
  bottom: 7%;
  width: 100%;
 }
</style>
